<template>
  <div class="login">
    <div class="login-inner">
      <div class="login-inner-left">
        <div class="login-inner-left-logo">
          logo
        </div>
        <div class="login-inner-left-name">
          真观易后台管理系统
        </div>
        <div class="login-inner-left-img">
          <img src="@/assets/login/登录界面.png" />
        </div>
      </div>
      <div class="login-inner-right">
        <div class="login-inner-right-username">
          <div class="login-inner-right-username-chine">
            用户登录
          </div>
          <div class="login-inner-right-username-engine">
            USER LOGIN
          </div>
        </div>
        <div class="login-inner-right-input">
          <el-form ref="formRef" :model="numberValidateForm" :rules="rules" label-width="100px" class="demo-ruleForm">
            <el-form-item prop="username">
              <el-input v-model="numberValidateForm.username" class="w-50" size="large" placeholder="请输入用户名称">
                <template #prefix>
                  <i :style="{ fontSize: '20px' }" class="iconfont icon-yonghutouxiang"></i>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="password" v-model="numberValidateForm.password" class="w-50" size="large" placeholder="请输入登录密码">
                <template #prefix>
                  <i :style="{ fontSize: '20px' }" class="iconfont icon-yuechi"></i>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="input3">
              <div class="login-inner-right-input-yan">
                <el-input v-model="numberValidateForm.input3" class="w-50" size="large" placeholder="请输入右侧校验码">
                  <template #prefix>
                    <i :style="{ fontSize: '20px' }" class="iconfont icon-anquan"></i>
                  </template>
                </el-input>
                <button @click="handlerNum">{{ num }}</button>
              </div>
            </el-form-item>
            <el-form-item>
              <button @click="submitForm()" class="button-login">登录</button>
            </el-form-item>
          </el-form>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import {useRouter,useRoute} from 'vue-router';
import { useUserStore } from '@/store/modules/user'
const User = useUserStore()
const router=useRouter()
const route=useRoute()
const num = ref('2202')
const numberValidateForm = reactive({
  username: '',
  password: '',
  input3: ''
})
const rules = reactive({
  password: [{ required: true, message: '请输入登录密码' }],
  username: [{ required: true, message: '请输入用户名称' }],
  input3: [
    { required: true, message: '请输入右侧校验码' },
    { validator: Inputs, trigger: 'blur' }],
})
function Inputs(rule, value, callback) {
  if (num.value !== numberValidateForm.input3) {
    callback('验证码错误')
  } else {
    callback()
  }
}
const formRef = ref(null)
const submitForm = () => {
  if (!formRef.value) return
  formRef.value.validate((valid) => {
    if (valid) {
      User.login({ username: numberValidateForm.username, password: numberValidateForm.password }).then(item => {
        // console.log(item);
        // if(route.query){
        //   console.log(route.query.redirect,'aaaaaaa');
        //   router.push({path:route.query.redirect})
        // }else{
        //   router.push('/')
        // }
      }).finally(() => {

      })
    } else {
      console.log('error submit!')
      return false
    }
  })
}
const handlerNum = () => {
  let a = ''
  for (let b = 0; b < 4; b++) {
    a += Math.floor(Math.random() * 10)
  }
  console.log(a);
  num.value = a
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__content {
  display: inline-block;
  margin-left: 0px !important;
}

.login {
  width: 100vw;
  height: 100vh;
  background: #2d3a4b;
  display: flex;
  justify-content: center;
  align-items: center;

  .login-inner {
    width: 800px;
    height: 540px;
    background: #ffffff;
    display: flex;
    border-radius: 6px;

    .login-inner-left {
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
      width: 330px;
      background: #409eff;

      .login-inner-left-logo {
        padding-top: 85px;
        color: white;
        font-weight: bold;
        text-align: center;
        box-sizing: border-box;
        font-size: 23px;
      }

      .login-inner-left-name {
        padding-top: 50px;
        color: white;
        font-weight: bold;
        text-align: center;
        box-sizing: border-box;
        font-size: 20px;
      }

      .login-inner-left-img {
        padding: 140px 15px 30px 15px;
        box-sizing: border-box;
      }
    }

    .login-inner-right {
      width: 100%;
      padding: 40px 45px 105px 45px;
      box-sizing: border-box;

      .login-inner-right-username {
        display: flex;
        align-items: center;

        .login-inner-right-username-chine {
          font-size: 16px;
          font-weight: bold;
          color: #6d6d6d;
        }

        .login-inner-right-username-engine {
          font-size: 14px;
          margin-left: 5px;
          color: #999999;
          margin-top: 2px;
        }
      }

      .login-inner-right-input {
        margin-top: 80px;

        .el-input {
          height: 50px;
          width: 100%;
          box-sizing: border-box;
          border: 1px solid #e4e4e4;
          border-radius: 7px;
        }

        input:nth-child(2) {
          margin: 20px 0px;
        }

        .login-inner-right-input-yan {
          display: flex;
          align-items: center;

          .el-input {
            width: 75%;
            position: relative;
          }

          button {
            font-style: italic !important;
            margin-left: 2%;
            width: 25%;
            height: 50px;
            border-radius: 7px;
            background: #f9f9f9;
            border: 1px solid #e4e4e4;
            color: #464c5b;
            font-size: 23px;
            font-family: inherit;
            letter-spacing: 2px;
          }
        }
      }
    }

    .button-login {

      margin-top: 50px;
      box-sizing: border-box;
      width: 100%;
      height: 50px;
      color: white;
      font-weight: bold;
      border-radius: 7px;
      background: #409eff;
      line-height: 50px;
      text-align: center;
      font-size: 16px;
    }
  }
}
</style>